---
type: tutorial
title:  概要ページにスタイルを設定する
description: |-
  「初めてのAstroブログ」チュートリアル -
  Astroのスタイルタグを追加して、ページにスコープされたスタイリングをおこなう
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

あなたに関するコンテンツをもつ概要ページができたので、スタイルを追加しましょう！

<PreCheck>
  - 特定のページの要素にスタイルを設定する
  - CSS変数を使う
</PreCheck>


## 個別のページにスタイルを適用する

Astroの`<style></style>`タグを使うと、ページの要素にスタイルを適用できます。このタグに**属性**と**ディレクティブ**を追加すると、より多くの方法でスタイルを設定できます。

<Steps>
1. 以下のコードをコピーして、`src/pages/about.astro`に貼り付けます。

    ```astro title="src/pages/about.astro" ins={6-11}
    <html lang="ja">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head> 

    ```

    ブラウザのプレビューで3つのページを確認します。
    
    - ページのタイトルの色は何ですか？

        - ホームページは <Spoiler>黒</Spoiler>
        - 概要ページは <Spoiler>紫</Spoiler>
        - ブログページは <Spoiler>黒</Spoiler>

    - タイトルテキストが最も大きいページはどれですか？ <Spoiler>概要ページ</Spoiler>

    :::tip
    視覚的に色を見分けることが難しい場合は、ブラウザの開発者ツールを使用して、テキストに適用された色を確認できます。
    :::

2. 概要ページに生成される`<li>`要素にクラス名`skill`を追加して、スタイルを適用できるようにします。コードは以下のようになります。

    ```astro title="src/pages/about.astro" 'class="skill"'
    <p>私のスキルは以下の通りです。</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>
    ```

3. 既存のスタイルタグに以下のコードを追加します。

    ```astro title="src/pages/about.astro" ins={6-9}
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>
    ```



  4. ブラウザで概要ページを再度開き、スキルのリストの各項目が緑色で太字になっていることを目視で確認、あるいは開発者ツールで確認します。
</Steps>

## 初めてのCSS変数

Astroの`<style>`タグでは、`define:vars={ {...} }`ディレクティブを使用して、フロントマタースクリプトの変数を参照することもできます。**コードフェンス内で変数を定義**し、**スタイルタグ内でCSS変数として使用**できます。

<Steps>
1. `src/pages/about.astro`のフロントマタースクリプトに、以下のように`skillColor`変数を定義します。

    ```astro title="src/pages/about.astro" ins={17}
    ---
    const pageTitle = "私について";

    const identity = {
      firstName: "サラ",
      country: "カナダ",
      occupation: "技術ライター",
      hobbies: ["写真", "バードウォッチング", "野球"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "ドキュメントの執筆"];

    const happy = true;
    const finished = false;
    const goal = 3;
  
    const skillColor = "navy";
    ---
    ```

2. 既存の`<style>`タグを以下のように更新して、`skillColor`変数をまず定義し、続いて二重波括弧内で使用します。

    ```astro title="src/pages/about.astro" "define:vars={{skillColor}}" "var(--skillColor)" del={7} ins={8}
    <style define:vars={{skillColor}}> 
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>
    ```

3. ブラウザのプレビューで概要ページを確認します。`define:vars`ディレクティブに渡された`skillColor`変数によって、スキルがネイビーブルーになっているはずです。
</Steps>

<Box icon="puzzle-piece">

## やってみよう - CSS変数を定義する

<Steps>
 1. 概要ページの`<style>`タグを以下のように更新します。

    ```astro title="src/pages/about.astro"
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>
    ```
 
 2. 概要ページのスキルリストにこれらのスタイルが適用されるように、不足している変数定義をフロントマタースクリプトに追加しましょう。
    - テキストの色はネイビーブルーとします
    - テキストは太字とします
    - リスト項目はすべて大文字とします
</Steps>
<details>
<summary>✅ コードを表示 ✅</summary>

```astro title="src/pages/about.astro" ins={18-19}
---
const pageTitle = "私について";

const identity = {
  firstName: "サラ",
  country: "カナダ",
  occupation: "技術ライター",
  hobbies: ["写真", "バードウォッチング", "野球"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "ドキュメントの執筆"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---
```
</details>

</Box>



<Box icon="check-list">
## チェックリスト

<Checklist>
- [ ] Astroの`<style>`タグを使用して、個々のページにCSSスタイルを追加できる。
- [ ] 変数を使用して、ページ上の要素にスタイルを適用できる。
</Checklist>
</Box>

### Resources
- [Astro構文とJSXの比較](/ja/basics/astro-syntax/#astroとjsxの違い)

- [Astroの`<style>`タグ](/ja/guides/styling/#astroでのスタイリング)

- [AstroにおけるCSS変数](/ja/guides/styling/#css変数)



